<template>
  <div class="floating-buttons-container" :class="{ 'show': showBackTop }">
    <!-- 聊天按钮 -->
    <div class="floating-button chat-btn" @mouseenter="animateButton('chat')" @mouseleave="stopAnimation('chat')"
      @click="handleChatClick">
      <div class="button-inner">
        <i class="fas fa-comments"></i>
        <span class="tooltip">聊天</span>
        <div class="dot-notification"></div>
      </div>
    </div>

    <!-- 主题切换按钮 -->
    <div class="floating-button theme-btn" @click="toggleTheme" @mouseenter="animateButton('theme')"
      @mouseleave="stopAnimation('theme')">
      <div class="button-inner">
        <div class="theme-icon-container">
          <i class="fas fa-sun sun-icon" :class="{ 'active': !isDarkMode }"></i>
          <i class="fas fa-moon moon-icon" :class="{ 'active': isDarkMode }"></i>
        </div>
        <span class="tooltip">{{ isDarkMode ? '亮色模式' : '暗色模式' }}</span>
      </div>
    </div>

    <!-- 问卷反馈按钮 -->
    <div class="floating-button feedback-btn" @click="goToFeedback" @mouseenter="animateButton('feedback')"
      @mouseleave="stopAnimation('feedback')">
      <div class="button-inner">
        <i class="fas fa-clipboard-check"></i>
        <span class="tooltip">问卷反馈</span>
      </div>
    </div>

    <!-- 火箭返回顶部按钮 - 移到最下方 -->
    <div class="floating-button back-to-top" @click="scrollToTop"
      :class="{ 'shake': animateRocket, 'launching': isLaunching }" @mouseenter="animateButton('rocket')"
      @mouseleave="stopAnimation('rocket')">
      <div class="button-inner">
        <div class="rocket">
          <div class="rocket-body">
            <div class="rocket-window"></div>
          </div>
          <div class="rocket-fins"></div>
          <div class="rocket-fire">
            <div class="fire-item"></div>
            <div class="fire-item"></div>
            <div class="fire-item"></div>
          </div>
        </div>
        <span class="tooltip">返回顶部</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getThemeMode, setThemeMode, initTheme } from '@/utils/theme'

export default {
  name: 'FloatingButtons',
  data() {
    return {
      showBackTop: false,
      animateRocket: false,
      isLaunching: false,
      scrollThreshold: 300,
      // 金山文档问卷链接
      feedbackUrl: 'https://f.wps.cn/g/dMiWNHeI/',
      timer: undefined,
      isDarkMode: false,
      animatedButtons: {
        chat: false,
        theme: false,
        feedback: false,
        rocket: false
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    // 初始检查滚动位置
    this.handleScroll()
    // 初始化主题设置
    this.isDarkMode = initTheme() === 'dark'
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
    if (this.timer) clearTimeout(this.timer)
  },
  methods: {
    handleScroll() {
      this.showBackTop = window.scrollY > this.scrollThreshold
    },

    scrollToTop() {
      // 添加火箭动画效果
      this.animateRocket = true
      this.isLaunching = true

      // 平滑滚动到顶部
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })

      // 动画结束后重置状态
      this.timer = setTimeout(() => {
        this.animateRocket = false
        // 延迟重置发射状态以完成动画
        setTimeout(() => {
          this.isLaunching = false
        }, 300)
      }, 1000)
    },

    toggleTheme() {
      this.isDarkMode = !this.isDarkMode
      const mode = this.isDarkMode ? 'dark' : 'light'
      setThemeMode(mode)

      // 添加主题切换动画效果
      if (document.documentElement) {
        document.documentElement.classList.add('theme-transition')
        setTimeout(() => {
          document.documentElement.classList.remove('theme-transition')
        }, 800)
      }
    },

    /**
     * 处理聊天按钮点击
     * 检查用户登录状态，未登录则跳转到登录页
     */
    handleChatClick() {
      // 检查用户是否已登录
      if (!this.$store.state.userInfo) {
        this.$message && this.$message.warning('请先登录后再使用聊天功能')
        // 跳转到登录页，并设置重定向到IM页面
        this.$router.push('/login?redirect=/im')
        return
      }

      // 用户已登录，直接跳转到IM页面
      this.$router.push('/im')
    },

    goToFeedback() {
      // 使用新窗口打开问卷链接，避免被LinkJumpPrompt拦截
      const win = window.open(this.feedbackUrl, '_blank')
      if (win) win.opener = null // 防止新窗口可以访问原窗口的对象

      // 告知用户
      this.$message && this.$message.success('问卷已在新窗口打开')
    },

    animateButton(buttonName) {
      this.animatedButtons[buttonName] = true
    },

    stopAnimation(buttonName) {
      this.animatedButtons[buttonName] = false
    }
  }
}
</script>

<style lang="scss" scoped>
.floating-buttons-container {
  position: fixed;
  right: 30px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 999;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;

  &.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
    animation: floatIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  // 针对移动设备的优化
  @media (max-width: 768px) {
    right: 15px; // 更贴近右侧
    bottom: 65px; // 距底部更近
    gap: 10px; // 减小按钮间距
  }

  // 针对更小屏幕设备的优化
  @media (max-width: 480px) {
    right: 12px; // 进一步贴近右侧
    bottom: 60px; // 进一步靠近底部
    gap: 8px; // 更小的间距
  }

  @keyframes floatIn {
    0% {
      transform: translateY(100px);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.floating-button {
  // 控制和改变浮动按钮大小
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  transform-origin: center;
  animation: buttonPulse 4s infinite ease-in-out;
  animation-play-state: paused;

  // 移动端样式优化
  @media (max-width: 768px) {
    width: 40px; // 减小尺寸
    height: 40px;
    border-width: 1.5px;
  }

  // 更小屏幕设备样式
  @media (max-width: 480px) {
    width: 36px; // 进一步减小尺寸
    height: 36px;
    border-width: 1px;
  }

  &:nth-child(odd) {
    animation-delay: 0.5s;
  }

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(103, 58, 183, 0.1));
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(64, 158, 255, 0.25);
    border-color: rgba(64, 158, 255, 0.3);
    animation-play-state: running;

    &::before {
      opacity: 1;
    }

    .tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      visibility: visible;
    }

    // 移动端悬停效果调整
    @media (max-width: 768px) {
      transform: translateY(-3px); // 减小悬停高度
    }
  }

  &:active {
    transform: translateY(0) scale(0.95);
  }

  .button-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;

    i {
      transition: all 0.3s ease;

      // 移动端图标尺寸
      @media (max-width: 768px) {
        font-size: 18px !important; // 覆盖其他样式中的字体大小
      }

      @media (max-width: 480px) {
        font-size: 16px !important; // 更小屏幕的图标尺寸
      }
    }
  }

  .tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    font-weight: 500;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    // 移动端提示框优化
    @media (max-width: 768px) {
      top: -34px; // 距离更近
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 400;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    &::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;

      @media (max-width: 768px) {
        border-width: 4px;
        margin-left: -4px;
      }
    }
  }

  @keyframes buttonPulse {
    0% {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }

    50% {
      box-shadow: 0 4px 20px rgba(64, 158, 255, 0.3);
    }

    100% {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }
  }
}

// 聊天按钮样式
.chat-btn {
  background: linear-gradient(135deg, #409EFF, #3178C6);
  border-color: rgba(255, 255, 255, 0.2);

  .button-inner {
    color: white;

    i {
      font-size: 22px;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    }
  }

  .dot-notification {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background-color: #F56C6C;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    animation: pulse 2s infinite;

    @media (max-width: 768px) {
      width: 6px;
      height: 6px;
      top: 8px;
      right: 8px;
    }

    @media (max-width: 480px) {
      width: 5px;
      height: 5px;
      top: 6px;
      right: 6px;
    }
  }

  &:hover {
    background: linear-gradient(135deg, #66b1ff, #4891e3);

    i {
      transform: scale(1.1) rotate(15deg);
      animation: chatBounce 0.6s ease infinite alternate;
    }
  }
}

// 主题切换按钮样式
.theme-btn {
  background: linear-gradient(135deg, #FFD43B, #FF9E2C);
  overflow: hidden;

  .theme-icon-container {
    position: relative;
    width: 24px;
    height: 24px;

    @media (max-width: 768px) {
      width: 20px;
      height: 20px;
    }

    @media (max-width: 480px) {
      width: 18px;
      height: 18px;
    }
  }

  .sun-icon,
  .moon-icon {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 22px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: white;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));

    &.active {
      opacity: 1;
      transform: scale(1);
    }
  }

  .sun-icon {
    color: white;
  }

  .moon-icon {
    color: #E6EAEF;
  }

  &:hover {
    background: linear-gradient(135deg, #ffdc68, #ffae54);

    .sun-icon.active,
    .moon-icon.active {
      transform: scale(1.1) rotate(15deg);
      animation: iconSpin 3s linear infinite;
    }
  }
}

// 火箭样式
.back-to-top {
  background: linear-gradient(135deg, #ffffff, #f5f7fa);

  &.shake {
    animation: rocketLaunch 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }

  &.launching {
    animation: rocketLaunchAndVanish 1.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
  }
}

.rocket {
  width: 22px;
  height: 30px;
  position: relative;
  transform: translateY(0) rotate(-45deg);
  transition: transform 0.5s ease;

  @media (max-width: 768px) {
    width: 18px;
    height: 25px;
  }

  @media (max-width: 480px) {
    width: 16px;
    height: 22px;
  }

  .back-to-top:hover & {
    transform: translateY(-5px) rotate(-45deg);
    animation: rocketFloat 2s ease-in-out infinite;
  }

  .back-to-top.shake & {
    animation: rocketShake 0.3s ease-in-out alternate infinite;
  }

  .back-to-top.launching & {
    transform: translateY(-10px) rotate(-45deg);
  }
}

.rocket-body {
  width: 18px;
  height: 25px;
  background: linear-gradient(135deg, #ff4c4c, #f36060);
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
  position: relative;
  z-index: 2;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);

  @media (max-width: 768px) {
    width: 16px;
    height: 22px;
  }

  @media (max-width: 480px) {
    width: 14px;
    height: 19px;
  }
}

.rocket-window {
  width: 8px;
  height: 8px;
  background: #c4e0ff;
  border-radius: 50%;
  position: absolute;
  top: 6px;
  left: 5px;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

  @media (max-width: 768px) {
    width: 6px;
    height: 6px;
    top: 5px;
    left: 5px;
  }

  @media (max-width: 480px) {
    width: 5px;
    height: 5px;
    top: 4px;
    left: 4.5px;
  }
}

.rocket-fins {
  position: absolute;
  width: 20px;
  height: 8px;
  background: #ff6b6b;
  bottom: 0;
  left: -1px;
  border-radius: 0 0 2px 2px;
  z-index: 1;

  @media (max-width: 768px) {
    width: 16px;
    height: 6px;
  }

  @media (max-width: 480px) {
    width: 14px;
    height: 5px;
  }
}

.rocket-fire {
  position: absolute;
  bottom: -8px;
  left: 5px;
  width: 8px;
  height: 12px;
  z-index: 0;

  @media (max-width: 768px) {
    width: 6px;
    height: 10px;
    bottom: -6px;
    left: 5px;
  }

  @media (max-width: 480px) {
    width: 5px;
    height: 8px;
    bottom: -5px;
    left: 4.5px;
  }

  .back-to-top:hover & {
    animation: fireGrow 0.5s ease-out infinite alternate;
  }
}

.fire-item {
  position: absolute;
  width: 8px;
  height: 12px;
  background: linear-gradient(to bottom, #ffbf00, rgba(255, 191, 0, 0));
  border-radius: 50% 50% 20% 20%;

  @media (max-width: 768px) {
    width: 6px;
    height: 10px;
  }

  @media (max-width: 480px) {
    width: 5px;
    height: 8px;
  }

  &:nth-child(1) {
    animation: flicker 0.3s infinite alternate;
  }

  &:nth-child(2) {
    animation: flicker 0.5s infinite alternate;
    width: 6px;
    height: 10px;
    left: 1px;
    bottom: -2px;
    opacity: 0.7;

    @media (max-width: 768px) {
      width: 5px;
      height: 8px;
      left: 0.5px;
    }

    @media (max-width: 480px) {
      width: 4px;
      height: 7px;
      left: 0.5px;
    }
  }

  &:nth-child(3) {
    animation: flicker 0.7s infinite alternate;
    width: 4px;
    height: 8px;
    left: 2px;
    bottom: -4px;
    opacity: 0.5;

    @media (max-width: 768px) {
      width: 3px;
      height: 6px;
      left: 1.5px;
    }

    @media (max-width: 480px) {
      width: 2.5px;
      height: 5px;
      left: 1.25px;
    }
  }
}

// 反馈按钮样式
.feedback-btn {
  background: linear-gradient(135deg, #67C23A, #85CE61);

  .button-inner {
    i {
      color: white;
      font-size: 22px;
      transition: all 0.3s ease;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
    }
  }

  &:hover {
    background: linear-gradient(135deg, #75d047, #93d775);

    i {
      transform: scale(1.1) rotate(10deg);
      animation: clipboardWave 1s ease-in-out infinite;
    }
  }
}

/* 火箭发射动画 */
@keyframes rocketLaunch {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-100px);
    opacity: 0.5;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 火箭发射并消失动画 */
@keyframes rocketLaunchAndVanish {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  30% {
    transform: translateY(-50px) scale(0.8);
    opacity: 0.8;
  }

  60% {
    transform: translateY(-150px) scale(0.6);
    opacity: 0.4;
  }

  100% {
    transform: translateY(-300px) scale(0.1);
    opacity: 0;
  }
}

/* 火箭悬浮动画 */
@keyframes rocketFloat {

  0%,
  100% {
    transform: translateY(-5px) rotate(-45deg);
  }

  50% {
    transform: translateY(-10px) rotate(-45deg);
  }
}

/* 火箭晃动动画 */
@keyframes rocketShake {
  0% {
    transform: translateY(-2px) rotate(-42deg);
  }

  100% {
    transform: translateY(-2px) rotate(-48deg);
  }
}

/* 火焰闪烁动画 */
@keyframes flicker {
  0% {
    opacity: 0.5;
    height: 12px;
    transform: scaleY(0.8);
  }

  100% {
    opacity: 1;
    height: 15px;
    transform: scaleY(1);
  }
}

/* 火焰增长动画 */
@keyframes fireGrow {
  0% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(1.5);
  }
}

/* 通知点动画 */
@keyframes pulse {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(245, 108, 108, 0);
  }

  100% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
  }
}

/* 聊天图标动画 */
@keyframes chatBounce {
  0% {
    transform: scale(1.1) translateY(0) rotate(0deg);
  }

  100% {
    transform: scale(1.15) translateY(-3px) rotate(10deg);
  }
}

/* 主题图标动画 */
@keyframes iconSpin {
  0% {
    transform: scale(1.1) rotate(0deg);
  }

  100% {
    transform: scale(1.1) rotate(360deg);
  }
}

/* 反馈按钮动画 */
@keyframes clipboardWave {

  0%,
  100% {
    transform: scale(1.1) rotate(0deg);
  }

  25% {
    transform: scale(1.1) rotate(8deg);
  }

  75% {
    transform: scale(1.1) rotate(-8deg);
  }
}

/* 媒体查询 - 适应深色主题 */
@media (prefers-color-scheme: dark) {
  .floating-button {
    background: #1f2937;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

    &::before {
      background: linear-gradient(135deg, rgba(64, 158, 255, 0.2), rgba(103, 58, 183, 0.2));
    }

    &:hover {
      box-shadow: 0 6px 20px rgba(64, 158, 255, 0.3);
    }

    .tooltip {
      background: rgba(40, 40, 40, 0.9);

      &::after {
        border-color: rgba(40, 40, 40, 0.9) transparent transparent transparent;
      }
    }
  }

  .rocket-window {
    background: #a3c8e6;
  }

  .chat-btn {
    background: linear-gradient(135deg, #3977cf, #235fbf);

    &:hover {
      background: linear-gradient(135deg, #4b89e0, #3470d1);
    }
  }

  .theme-btn {
    background: linear-gradient(135deg, #c7a61d, #ae711f);

    &:hover {
      background: linear-gradient(135deg, #d6b22c, #c28229);
    }

    .sun-icon {
      color: #ffd54f;
      filter: drop-shadow(0 0 5px rgba(255, 213, 79, 0.5));
    }

    .moon-icon {
      color: #d6e4ff;
      filter: drop-shadow(0 0 5px rgba(214, 228, 255, 0.5));
    }
  }

  .feedback-btn {
    background: linear-gradient(135deg, #529f30, #6db051);

    &:hover {
      background: linear-gradient(135deg, #61b839, #7dbf5d);
    }
  }

  .back-to-top {
    background: linear-gradient(135deg, #2d3748, #1a202c);

    .rocket-body {
      background: linear-gradient(135deg, #ff5252, #d32f2f);
    }

    .rocket-window {
      background: #90caf9;
    }

    .rocket-fins {
      background: #ef5350;
    }

    .fire-item {
      background: linear-gradient(to bottom, #ffd54f, rgba(255, 213, 79, 0));
    }
  }
}

/* 自定义暗色模式类 */
.dark-mode {
  .floating-button {
    background: #1f2937;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

    &::before {
      background: linear-gradient(135deg, rgba(64, 158, 255, 0.2), rgba(103, 58, 183, 0.2));
    }

    &:hover {
      box-shadow: 0 6px 20px rgba(64, 158, 255, 0.3);
    }

    .tooltip {
      background: rgba(40, 40, 40, 0.9);

      &::after {
        border-color: rgba(40, 40, 40, 0.9) transparent transparent transparent;
      }
    }
  }

  .chat-btn {
    background: linear-gradient(135deg, #3977cf, #235fbf);

    &:hover {
      background: linear-gradient(135deg, #4b89e0, #3470d1);
    }
  }

  .theme-btn {
    background: linear-gradient(135deg, #c7a61d, #ae711f);

    &:hover {
      background: linear-gradient(135deg, #d6b22c, #c28229);
    }

    .sun-icon {
      color: #ffd54f;
      filter: drop-shadow(0 0 5px rgba(255, 213, 79, 0.5));
    }

    .moon-icon {
      color: #d6e4ff;
      filter: drop-shadow(0 0 5px rgba(214, 228, 255, 0.5));
    }
  }

  .feedback-btn {
    background: linear-gradient(135deg, #529f30, #6db051);

    &:hover {
      background: linear-gradient(135deg, #61b839, #7dbf5d);
    }
  }

  .back-to-top {
    background: linear-gradient(135deg, #2d3748, #1a202c);

    .rocket-body {
      background: linear-gradient(135deg, #ff5252, #d32f2f);
    }

    .rocket-window {
      background: #90caf9;
    }

    .rocket-fins {
      background: #ef5350;
    }

    .fire-item {
      background: linear-gradient(to bottom, #ffd54f, rgba(255, 213, 79, 0));
    }
  }
}

/* 主题过渡动画 */
:root.theme-transition,
:root.theme-transition *,
:root.theme-transition *:before,
:root.theme-transition *:after {
  transition: all 0.5s ease !important;
  transition-delay: 0 !important;
}
</style>